<template>
  <div class="PopulationMobility card-bg">
    <div class="card-title">人口流动</div>
    <div class="ecahrts-box" ref="ecahrts"></div>
  </div>
</template>
<script>
import { statisticsMobilityRate } from "@/api/panoramicData";

let myChart = null;
export default {
  mounted() {
    this.runStatisticsMobilityRate();
  },
  methods: {
    draw(data) {
      myChart && myChart.dispose();
      myChart = this.$echarts.init(this.$refs.ecahrts);
      const colorList = ["#4ACDCF", "#FA21FD", "#8A38F5"];
      let option = {
        title: {
          show: false,
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "#A8D6FF",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#A8D6FF",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          bottom: "13%",
          top: "13%",
        },
        xAxis: [
          {
            type: "category",
            data: [
              this.$moment().subtract(5, "months").format("MM月"),
              this.$moment().subtract(4, "months").format("MM月"),
              this.$moment().subtract(3, "months").format("MM月"),
              this.$moment().subtract(2, "months").format("MM月"),
              this.$moment().subtract(1, "months").format("MM月"),
              this.$moment().subtract(0, "months").format("MM月"),
            ],

            axisLine: {
              show: true,
              lineStyle: {
                color: "#C1C2C6",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A8D6FF",
              },
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
              margin: 15,
              align: "center",
            },
            axisPointer: {
              label: {
                // padding: [11, 5, 7],
                padding: [0, 0, 10, 0],

                // 这里的margin和axisLabel的margin要一致!
                margin: 15,
                // 移入时的字体大小
                fontSize: 12,
                backgroundColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      // offset: 0.9,
                      offset: 0.86,

                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      offset: 0.86,
                      color: "#33c0cd", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#33c0cd", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },

            boundaryGap: false,
          },
        ],

        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#A8D6FF",
              },
            },
            // 分割线
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#E9E9E9",
              },
            },
          },
          {
            type: "value",
            // position: 'right',
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#A8D6FF",
              },
              formatter: "{value}",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "入住",
            type: "line",
            data: data[0].Data,
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#4ACDCF",
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: colorList[0],
                borderColor: colorList[0],
              },
            },
          },
          {
            name: "搬离",
            type: "line",
            data: data[1].Data,
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 1,
                  color: "#FA21FD",
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: colorList[1],
                borderColor: colorList[1],
              },
            },
          },
          {
            name: "人口流动率",
            type: "line",
            data: data[2].Data,
            symbolSize: 1,
            yAxisIndex: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 1,
                  color: "#8A38F5",
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: colorList[2],
                borderColor: colorList[2],
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    async runStatisticsMobilityRate() {
      const res = await statisticsMobilityRate();
      this.draw(res.data);
    },
  },
  deactivated() {
    myChart && myChart.dispose();
  },
};
</script>
<style lang="scss" scoped>
.PopulationMobility {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .ecahrts-box {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>
